<template>
  <transition name="el-fade-in-linear">
    <div class="login_back"
         :class="backImgClass"
         v-show="backImgClassStatus">
      <div class="loacl-language"
           v-show="languageShow">
        <el-select v-model="language"
                   placeholder="language">
          <el-option v-for="item in languageArr"
                     :label="item.name"
                     :key="item.value"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="login_input"
           :class="loginImgClass">
        <template>
          <div class="title">
            <img :src="login_img_path"
                 class="login_img" />
            <div class="login_title"> {{ login_title }}</div>
          </div>
          <hr />
          <form>
            <div class="input">
              <el-input size="large"
                        v-model="loginName"
                        :placeholder="$t('yl.login_name_placeholder')">
              </el-input>
            </div>
            <div class="input">
              <el-input size="large"
                        v-model="password"
                        :placeholder="$t('yl.password_placeholder')"
                        show-password></el-input>
            </div>
            <div class="local-setting">
              <el-checkbox class="loacl_user"
                           v-model="loacl_user">{{ $t("yl.loacl_user") }}</el-checkbox>
              <span class="forget-password"
                    @click="forgetPassword()">{{ $t("yl.forget_password") }}</span>
            </div>
            <div class="login-btn">
              <el-button class="login-button"
                         @click="login()"
                         size="medium"
                         type="primary"
                         round>
                {{ $t("yl.login_btn") }}
              </el-button>
            </div>
          </form>
          <div class="other"
               v-if="isOther">
            <div class="register">
              <template v-if="isRegister">
                <svg class="icon"
                     aria-hidden="true">
                  <use xlink:href="#icon-zhuce"></use>
                </svg>
                <span class="register-text">{{ $t("yl.register_text") }}</span>
              </template>
            </div>
            <div class="third-party">
              <span class="third-party-text">{{ $t("yl.third_party_text") }}</span>
              <template v-if="isQq">
                <svg class="icon"
                     aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
              </template>
              <template v-if="isWx">
                <svg class="icon"
                     aria-hidden="true">
                  <use xlink:href="#icon-QQ"></use>
                </svg>
              </template>
            </div>
          </div>

        </template>

      </div>

    </div>
  </transition>

</template>

<script>
export default {
  data: function () {
    return {
      loginName: '',
      password: '',
      back_img: '',
      backImgClass: '',
      loginImgClass: '',
      login_title: '用户登录',
      backImgClassStatus: false,
      login_img_path: '',
      icon_img: '',
      loacl_user: false,
      languageArr: this.Store.state.languageConfig,
      language: '',
      languageShow: true,
      isRegister: false,
      isQq: false,
      isWx: false,
      isOther: true
    }
  },
  methods: {
    login () {
      if (this.StringUtils.isEmpty(this.$data.loginName)) {
        this.MessageUtils.notifyWarning(this, this.$i18n.tc('yl.chack_login_name'))
        return
      }
      if (this.StringUtils.isEmpty(this.$data.password)) {
        this.MessageUtils.notifyWarning(this, this.$i18n.tc('yl.chack_password'))
        return
      }

      let requestLogin = {
        loginName: this.$data.loginName,
        password: this.$data.password
      }
      let response = this.ACLUserRepo.uploadData(this.RequestApi.login, requestLogin)
      response.then((obj) => {
        if (this.StringUtils.verifyTheSame(obj.code, this.RequestApi.login_OK)) {
          if (this.$data.loacl_user) {
            localStorage.setItem('user', this.JSEncryptUtils.rsaEncryptLoacl(JSON.stringify(
              requestLogin)))
          } else {
            localStorage.setItem('user', '')
          }
          this.Store.commit('login', obj.data)
          this.Store.dispatch('generateRoutes', this.Store.state.navigations).then(() => {
            this.$router.addRoutes(this.Store.getters.addRouter)
            this.$router.push({ name: 'main' })
          })
        } else if (this.StringUtils.verifyTheSame(obj.code, this.RequestApi.login_FREEZE)) {

        } else if (this.StringUtils.verifyTheSame(obj.code, this.RequestApi.login_DEL)) {

        } else if (this.StringUtils.verifyTheSame(obj.code, this.RequestApi.login_ERROR)) {

        } else if (this.StringUtils.verifyTheSame(obj.code, this.RequestApi.login_EXIST)) {

        } else if (this.StringUtils.verifyTheSame(obj.code, this.RequestApi.login_PASSWORD_ERROR)) {

        }
      }).catch((e) => {
        this.MessageUtils.error(this, this.$i18n.tc('yl.error'))
      })
    },
    forgetPassword () {
      this.log('忘记密码页')
    }
  },
  watch: {

    language () {
      this.setLanguage(this.$data.language)
    }
  },
  created () {
    let that = this.$data
    that.backImgClass = 'defult_back'
    that.loginImgClass = 'defult_login_back'
    let user = localStorage.getItem('user')
    if (this.StringUtils.isNotEmpty(user)) {
      let json = this.JSEncryptUtils.rsaDecryptLoacl(user)
      let userJson = JSON.parse(json)
      that.loginName = userJson.loginName
      that.password = userJson.password
      that.loacl_user = true
    }

    let windowsInterval = setInterval(() => {
      that.backImgClassStatus = true
      if (this.Store.state.configSettingStatus) {
        let configSetting = this.Store.state.configSetting
        that.login_img_path = configSetting.loginImgPath
        that.languageShow = this.StringUtils.verifyTheSame(configSetting.isLanguage, '0')
        that.isRegister = this.StringUtils.verifyTheSame(configSetting.isRegister, '0')
        that.isQq = this.StringUtils.verifyTheSame(configSetting.isQq, '0')
        that.isWx = this.StringUtils.verifyTheSame(configSetting.isWx, '0')
        that.isOther = that.isRegister || that.isQq || that.isWx
        window.clearInterval(windowsInterval)
      }
    }, 100)
  }
}
</script>

<style>
.login_back {
  height: 100%;
  width: 100%;
}

.defult_back {
  background-image: url(../assets/back_img/back_defult_login_img.jpg);
  background-size: 100% 100%;
}

.defult_login_back {
  background-image: url(../assets/back_img/back_defult_login_img.jpg);
  background-size: 100% 100%;
}

.login_input {
  float: right;
  margin-right: calc(12%);
  margin-top: calc(12.5% - 1px);
  width: calc(22%);
  height: calc(36%);
  border: 1px solid silver;
  border-radius: 15px;
  padding: 25px;
}

.login_title {
  font-size: 20px;
  font-weight: 700;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transform: translateY(-50%);
}

.title {
  height: 15%;
  position: relative;
}

.login_img {
  height: calc(100%);
  display: inline-block;
  overflow: hidden;
}

.input {
  margin-top: 4%;
  height: 12%;
}

.local-setting {
  margin-left: 2%;
  margin-top: 3%;
  font-size: 16px;
  height: 6%;
}

.loacl-language {
  position: absolute;
  left: calc(100% - 120px);
  margin-right: 10px;
  width: 110px;
  top: 15px;
  background: transparent;
}

.forget-password {
  float: right;
  margin-right: 10px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.login-btn {
  margin-top: 2%;
  text-align: center;
}

.login-button {
  width: 95%;
}

.other {
  padding-top: 4%;
  height: 16%;
}

.third-party-text {
  margin-right: 6px;
  font-size: 12px;
  color: #fff;
}

.third-party,
.register {
  display: inline-block;
}

.register {
  margin-left: 20px;
}

.register-text {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
}

.icon {
  font-size: 1.5rem;
  cursor: pointer;
}

.third-party {
  float: right;
  margin-right: 20px;
}
</style>
